<template>
  <div>
    <el-dialog class="dialog" :visible.sync="visible" :width="width" :modal-append-to-body="false" :show-close="true"
      :close-on-click-modal="false" :before-close="hide" :style="{ '--el-dialog-height': height }">
      <template slot="title">
        <div class="close" @click="hide"></div>
        <div class="dialog-header">
          <div class="header-title">产品特色</div>
        </div>
      </template>
      <div class="dialog-body">
        <el-scrollbar>
          <div class="data-item" v-for="(value, key) in params.details">
            <div class="title">{{ key }}</div>
            <div class="content" v-if="!['产品对比', '年免赔额', '投保年龄', '投保年龄', '理赔比例'].includes(key)" :class="key">
              <div class="content-item" v-for="item in value">{{ item }}</div>
            </div>
            <div class="content" v-else-if="['产品对比'].includes(key)" :class="key">
              <div class="product-item" v-for="(product_value, product_key) in value">
                <div class="product-name">{{ product_key }}</div>
                <div class="product-data-item" v-for="(data_value, data_key) in product_value">
                  <div class="data-label">
                    {{ data_key }}
                    <div class="tip" v-if="['保障内容', '免赔额', '健康告知'].includes(data_key)">
                      <svg-icon icon-class="good" />
                      <span v-if="data_key=='保障内容'">更优选 保额高、不限医保目录</span>
                      <span v-if="data_key=='免赔额'">更优选 低免赔额，更实用</span>
                      <span v-if="data_key=='健康告知'">更优选 免健告，重疾赔付后仍可续保</span>
                    </div>
                  </div>
                  <div class="data-value" v-if="['保障内容', '免赔额'].includes(data_key)">
                    <div class="data-value-item" v-for="data_value_item in data_value">{{ data_value_item }}</div>
                  </div>
                  <div class="data-value" v-else>{{ data_value }}</div>
                </div>
              </div>
            </div>
            <div class="content" v-else :class="key">{{ value }}</div>
          </div>
          <div class="data-item">
            <div class="content" :class="'阅读提示'">
              请阅读 <span class="link" v-for="link in linkList">{{ link }}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'InsuranceDetailDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: '80%',
    },
    height: {
      type: String,
      default: '915px',
    },
  },
  data() {
    return {
      dataLoading: false,
      linkList: ['服务协议', '客户告知书', '投保须知', '保险条款产品说明书', '健康管理服务协议'],
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) this.getData();
      },
      immediate: true,
    },
  },
  methods: {
    hide() {
      this.$emit('update:visible', false);
    },
    getData() {},
  },
};
</script>

<style lang="scss" scoped>
@import './dialog.scss';

::v-deep .el-dialog__body {
  padding-right: 5px !important;
}

.dialog-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.data-item {
  margin-right: 15px;
  margin-bottom: 30px;

  &:last-child {
    margin-bottom: 0px;
  }

  &:first-child {
    .content {
      padding: 0px;

      .content-item {
        padding: 15px;

        &:last-child {
          border-radius: 10px;
          background: #e2eeff;
          color: #408bef;
        }
      }
    }
  }

  .title {
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    color: #3d3d3d;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #5d8cff;
  }

  .content {
    padding: 15px;
    border-radius: 10px;
    background: linear-gradient(250deg, #2f80ed 0%, #a4cbff 100%);
    font-size: 18px;
    color: #fff;

    &.产品对比 {
      padding: 0px;
      background: transparent;
      display: flex;
      justify-content: space-between;

      .product-item {
        width: 49%;
        padding: 5px;
        border-radius: 10px;
        border: 1px solid #e6e6e6;
        display: flex;
        flex-direction: column;

        .product-name {
          padding: 15px 0;
          font-size: 20px;
          text-align: center;
          border-radius: 10px;
          background: linear-gradient(255deg, #dddddd 0%, #9f9f9f 100%);
        }

        .product-data-item {
          border-radius: 10px;
          margin-bottom: 6px;

          &:nth-child(2) {
            flex: 1;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
          }

          &:last-child {
            margin-bottom: 0px;
          }

          .data-label {
            padding: 8px 0;
            text-align: center;
            position: relative;
            .tip {
              position: absolute;
              top: -18px;
              left: 50%;
              transform: translateX(-50%);
              // width: 105%;
              white-space: nowrap;
              padding: 2px 10px;
              border-radius: 15px;
              background: #f7a968;
              color: #fff;
              font-size: 15px;
              &::before {
                content: ' ';
                position: absolute;
                left: 50%;
                bottom: -10px;
                transform: translateX(-50%);
                margin-bottom: 3px;
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 9px solid #f7a968;
              }
              .svg-icon {
                font-size: 18px;
                margin-right: 5px;
              }
            }
          }

          .data-value {
            padding: 8px;
            padding-top: 0px;
            font-size: 17px;

            .data-value-item {
              margin-bottom: 10px;

              &:last-child {
                margin-bottom: 0px;
              }
            }
          }
        }

        &:first-child {
          .product-name {
            background: linear-gradient(255deg, #dddddd 0%, #9f9f9f 100%);
          }

          .product-data-item {
            background: #efefef;

            .data-label {
              color: #454545;
              .tip {
                display: none;
              }
            }

            .data-value {
              color: #5f5f5f;
            }
          }
        }

        &:last-child {
          .product-name {
            background: linear-gradient(255deg, #2f80ed 0%, #a4cbff 100%);
          }

          .product-data-item {
            background: #e3efff;

            .data-label {
              color: #9bc6ff;
            }

            .data-value {
              color: #408bef;
            }
          }
        }
      }
    }

    &.阅读提示 {
      padding: 0px;
      padding-bottom: 15px;
      background: transparent;
      color: #3d3d3d;

      .link {
        display: inline-block;
        height: 16px;
        line-height: 16px;
        color: #575dfb;
        cursor: pointer;
        border-right: 1px solid #3d3d3d;
        padding-right: 5px;
        margin-right: 5px;

        &:last-child {
          border-right: none;
          padding-right: 0px;
          margin-right: 0px;
        }

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
